<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--完整写法-->
    <button v-on:click="handler">点击</button>
    <!--语法糖-->
    <button @click="handler">点击</button>
    <!--对象语法-->
    <button v-on="{click:handler,mousemove:handler}">点击</button>
    <!--行内表达式-->
    <button @click="count++">{{count}}</button>
    <!--事件传参-->
    <button @click="add(10,$event)">++</button>
</div>
<script src="../../JavaScript/vue.js"></script>
<script>
/*
 v-on指令用于给元素绑定事件监听器。
缩写：@
期望的绑定值类型：Function | Inline Statement | Object (不带参数)
参数：event (使用对象语法则为可选项)
修饰符
    .stop - 调用 event.stopPropagation()。
    .prevent - 调用 event.preventDefault()。
    .capture - 在捕获模式添加事件监听器。
    .self - 只有事件从元素本身发出才触发处理函数。
    .{keyAlias} - 只在某些按键下触发处理函数。
    .once - 最多触发一次处理函数。
    .left - 只在鼠标左键事件触发处理函数。
    .right - 只在鼠标右键事件触发处理函数。
    .middle - 只在鼠标中键事件触发处理函数。
    .passive - 通过 { passive: true } 附加一个 DOM 事件。
详细信息
    事件类型由参数来指定。表达式可以是一个方法名，一个内联声明，如果有修饰符则可省略。
    当用于普通元素，只监听原生 DOM 事件。当用于自定义元素组件，则监听子组件触发的自定义事件。
    当监听原生 DOM 事件时，方法接收原生事件作为唯一参数。如果使用内联声明，声明可以访问一个特殊的 $event 变量：v-on:click="handle('ok', $event)"。
*/
    const app = Vue.createApp({
        data() {
            return {
                count: 0
            }
        },
        methods: {
            handler() {
                console.log("我被点击了")
            },
            add(value,event){
                this.count+=value
                console.log(event)
            }
        }
    })
    app.mount("#app")
</script>
</body>
</html>